<template>
  <el-row class="IoSpeakingWriting-box">
    <el-col :span="24" class="IoSpeakingWriting-page">
      <div
        id="IoWrite"
        class="linePage ScaleCSSViewport_unzoom"
        v-loading="loading"
        element-loading-spinner="el-icon-loading"
        element-loading-background="#021033"
      ></div>
    </el-col>
    <el-col :span="24" class="IoSpeakingWriting-file">
      <span class="LoadFile"
        >IO 写 ：{{ this.write ? this.write + " KB" : "0" + " KB" }}
      </span>
    </el-col>
  </el-row>
</template>>

<script>
import { MySqlIoreadWrite } from "@/api/index.js";
import bus from "common/bus.js";
import { Line } from "@antv/g2plot";
import Isnull from "@/utils/ObjectIsNull.js"

export default {
  data() {
    return {
      selectedMonID: "",
      timerName: "mysqlIoWrite",
      timerEventName: "mysqltimerIoWrite",
      timerInterval: 1000 * 30,
      lineItem: "",
      lineData: [],
      write: "",
      loading:false,
    };
  },
  created() {
    bus.$on("selectedMonIDMysql", (msg) => {
      // 获取数据
      this.selectedMonID = msg;


          this.initGetData()
      
      // this.getData();
    });
    // this.initGetData();
    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });
     bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {

                this.initGetData();
            }
        });
  },
  mounted() {
    this.initLine();
  },
  computed: {},
  methods: {
    initGetData() {
     
      // (this.loading = true),
        MySqlIoreadWrite({ip:this.selectedMonID.selectedIP,dbServername:this.selectedMonID.selectedDBNAME})
          .then((res) => {
            
            
            
            this.lineData=[]
            
            res.forEach((item) => {
              this.lineData.push({
                Date: item.RecordTime,
                scales: parseFloat(item.innodbDataWritten),
                category: "已写入总量(KB)",
              },{ Date: item.RecordTime,
                scales: parseFloat(item.innodbDataWrites),
                category: "数据写次数",});
            });
            
            if (res.length===0) {
              this.write = 0
              
              this.lineItem.update({ data: [] });
            } else {
              this.write = parseInt(res[0].avgwrite);
              this.lineItem.changeData(this.lineData);
            }
           
          
             
          })
          .catch((_) => {})
          .finally((_) => {
          //  this.loading = false;
          });
    },
   
    initLine() {
      this.lineItem = new Line("IoWrite", {
        data: this.lineData,
        padding: "auto",
        xField: "Date",
        yField: "scales",
        height: 145 * this.ZOOM,
        legend: false,
        seriesField: "category",
        color: ["#1979C9", "#D62A0D"],
        // xAxis: {
        //   // type: 'timeCat',
        //   tickCount: 30,
        // },
        // padding:20,
        xAxis: false,
       
      });

      this.lineItem.render();
    },
  },
  beforeDestroy() {
    bus.$emit("timerNewTodo", {
      name: this.timerName,
    });
    this.lineItem.destroy();
     bus.$off('selectedMonIDMysql')
  },
};
</script>
<style scoped>
.IoSpeakingWriting-box {
  height: 100%;
}
.IoSpeakingWriting-page {
  height: 72%;
  width: 100%;
}
.linePage {
  height: 100%;
  width: 100%;
}
.IoSpeakingWriting-file {
  height: 30%;
  width: 100%;
  text-align: center;
}
</style>